import React, { PureComponent, ReactNode } from 'react';
import { connect, SubscriptionAPI } from 'dva';
import { Row, Col } from 'antd';
import centos from 'assets/centos.png';
import debian from 'assets/debian.png';
import suse from 'assets/suse.png';
import ubuntu from 'assets/ubuntu.png';
import windows from 'assets/windows.png';
import { ListType, ListItem } from '../../models/agent';

interface Props extends SubscriptionAPI{
  data: ListType;
}

const ImageCompoent = (str: string): ReactNode => {
  const src = {
    centos,
    debian,
    suse,
    ubuntu,
    windows,
  }[str];

  return src ? <img src={src} alt={str}/> : '';
};

@connect(({ agent }: any) => agent)
class InstanceList extends PureComponent<Props> {
  render () {
    const { data } = this.props;

    return (
      <>
        <div style={{ marginTop: '18px' }}>
          {
            data.map((item: ListItem) =>(
              <Row key={item.id}>
                <Col span={3}>
                  {
                    ImageCompoent(item.os)
                  }
                </Col>
                <Col span={21}>
                  <Row type="flex" align="middle">
                    当shape === list时，没有UI，暂不知如何呈现
                  </Row>
                </Col>
              </Row>
            ))
          }
        </div>
      </>
    )
  }
}

export default InstanceList;
